<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
      rel="stylesheet"
    />

    <title>Carousel Component</title>

    <style>
      /*
      SPACING SYSTEM (px)
      2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
      FONT SIZE SYSTEM (px)
      10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
      */
      /*
      MAIN COLOR: #087f5b
      GREY COLOR: #343a40
      */

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Inter", sans-serif;
        color: #343a40;
        line-height: 1;
      }

      .carousel {
        width: 800px;
        margin: 100px auto;
        background-color: #087f5b;
        /* padding: 32px; */
        /* padding-left: 86px; */
        /* padding-right: 48px; */
        padding: 32px 48px 32px 86px;

        border-radius: 8px;
        position: relative;

        display: flex;
        align-items: center;
        gap: 86px;
      }

      img {
        height: 200px;
        border-radius: 8px;
        transform: scale(1.5);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
      }

      .testimonial-text {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 32px;
        color: #e6fcf5;
      }

      .testimonial-author {
        font-size: 14px;
        margin-bottom: 4px;
        color: #c3fae8;
      }

      .testimonial-job {
        font-size: 12px;
        color: #c3fae8;
      }

      /* CONTROLS */
      .btn {
        background-color: #fff;
        border: none;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        position: absolute;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
        cursor: pointer;

        display: flex;
        align-items: center;
        justify-content: center;
      }

      .btn--left {
        /* In relation to PARENTE ELEMENT */
        left: 0;
        top: 50%;

        /* In relation to ELEMENT ITSELF */
        transform: translate(-50%, -50%);
      }

      .btn--right {
        right: 0;
        top: 50%;

        transform: translate(50%, -50%);
      }

      .btn-icon {
        height: 24px;
        width: 24px;
        stroke: #087f5b;
      }
      .dots {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 32px);

        display: flex;
        gap: 12px;
      }

      .dot {
        height: 12px;
        width: 12px;
        background-color: #fff;
        border: 2px solid #087f5b;
        border-radius: 50%;
        cursor: pointer;
      }

      .dot--fill {
        background-color: #087f5b;
      }
    </style>
  </head>
  <body>
    <div class="carousel">
      <img src="maria.jpg" alt="Maria de Almeida" />
      <blockquote class="testimonial">
        <p class="testimonial-text">
          "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia
          nesciunt aliquid ex atque quibusdam. Rerum officia unde suscipit quo
          sunt hic illo fugit."
        </p>
        <p class="testimonial-author">Maria de Almeida</p>
        <p class="testimonial-job">Senior Product Manager at EDP Comercial</p>
      </blockquote>

      <button class="btn btn--left">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="btn-icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M15 19l-7-7 7-7"
          />
        </svg>
      </button>
      <button class="btn btn--right">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="btn-icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 5l7 7-7 7"
          />
        </svg>
      </button>
      <div class="dots">
        <button class="dot dot--fill">&nbsp;</button>
        <button class="dot">&nbsp;</button>
        <button class="dot">&nbsp;</button>
        <button class="dot">&nbsp;</button>
      </div>
    </div>
  </body>
</html>
